import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import { MarqueeHorizontal, MarqueeVertical } from 'react-native-marquee-ab';
import styles from './styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Utils from "../../utils/Utils";


const { width, height } = Dimensions.get('window')

export default class Lists extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loaded: false,
            refreshing: false,
            gmlist: null,
        };
    }
    static navigationOptions = {
        title: '开奖公告',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,

        },
        headerTintColor: '#fff',
        headerTitleStyle: {

        },
    }
    componentDidMount() {
        this.getSiteInfo();
    }
    getSiteInfo() {
        Httpc.get(REQUEST.site_info, { rootid: app.rootid }, function (res) {
            console.log(res);
            if (res.StatusCode == 1) {
                this.setState({
                    gmlist: res.Data.gmlist
                });
                Ugame.site = res.Data.site;
            }
        }.bind(this));
    }
    _on_FootballLottery = () => {
        this.props.navigation.navigate('FootballLottery');
    }
    on_FootballGame = (item) => {
        let dui = item.info.split(":");
        const PicAddr = Httpc.imgPate(item.PicAddr);
        return (
            <TouchableOpacity onPress={() => this._on_FootballLottery()}>
                <View style={styles.typelists}>
                    <View style={styles.listdata}>
                        <View style={styles.name}>
                            <Text style={{ color: '#333333' }}>{item.Name}</Text>
                            <Text style={{ color: '#333333' }}>主队 VS 客队</Text>
                            <Text style={{ color: '#333333' }}>{item.dtime.substr(0, 10)}</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                            <Image style={{ width: 40, height: 40 }} resizeMode="cover" source={{ uri: PicAddr }} />
                            <Text style={{ color: '#333333', marginLeft: 20 }}>{dui[0]}</Text>
                            <Text style={{ color: '#333333', marginLeft: 20, marginRight: 20 }}>{item.result}</Text>
                            <Text style={{ color: '#333333' }}>{dui[1]}</Text>
                        </View>
                    </View>
                    <Image resizeMode="cover" style={styles.jt} source={require('../../image/js_img_list_jump.png')} />
                </View>
            </TouchableOpacity>
        );
    }
    on_DLTGame = (item) => {
        let dui = item.info.split(":");
        const PicAddr = Httpc.imgPate(item.PicAddr);
        var balls = item.result.split('|');
        let red_ball = balls[0].split(',');
        let blue_ball = balls[1].split(',');
        let ball_node = [];
        for (let i = 0; i < red_ball.length; i++) {
            let css = styles.red_ball_t_on;
            ball_node.push(
                <Text key={ball_node.length} style={css}>{red_ball[i]}</Text>
            );
        }
        for (let i = 0; i < blue_ball.length; i++) {
            let css = styles.blue_ball_t_on;
            ball_node.push(
                <Text key={ball_node.length} style={css}>{blue_ball[i]}</Text>
            );
        }
        return (
            <TouchableOpacity onPress={() => this._on_DLTLottery()}>
                <View style={styles.typelists}>
                    <View style={styles.listdata}>
                        <View style={styles.name}>
                            <Text style={{ color: '#333333' }}>{item.Name}</Text>                            
                            <Text style={{ color: '#333333' }}>开奖时间：{item.dtime.substr(0, 10)}</Text>
                            <Text style={{ color: '#333333' }}>第{item.number}期</Text>
                        </View>
                        <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                            {ball_node}
                        </View>
                    </View>
                    <Image resizeMode="cover" style={styles.jt} source={require('../../image/js_img_list_jump.png')} />
                </View>
            </TouchableOpacity>
        );
    }
    _on_DLTLottery = () => {
        this.props.navigation.navigate('DLTLottery', {
            page: 0
        });
    }
    _createListItem = ({ item }) => {
        let dui = item.info.split(":");
        const PicAddr = Httpc.imgPate(item.PicAddr);
        switch (item.Model) {
            case 'FootballGame':
                return this.on_FootballGame(item);
                break;
            case 'DLTGame':
                return this.on_DLTGame(item);
                break;
        }
    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    render() {
        let { gmlist } = this.state;
        return (
            <View style={styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <ScrollView>
                    <FlatList
                        data={gmlist}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={this._createListItem}
                        ItemSeparatorComponent={this._separator}
                    />
                </ScrollView>
            </View>
        )
    }



}
